<template>
  <a-modal
    centered
    width="1600px"
    v-model="visible"
    :footer="null"
    :z-index="1001"
    @cancel="onCallCancel"
  >
    <template slot="title">
      <a-avatar
        size="large"
        :style="{ backgroundColor: '#35bee9', verticalAlign: 'middle' }"
      >
        专
      </a-avatar>
    </template>
    <div class="l-call-phone">
      <a-row :gutter="60">
        <a-col :span="9" :style="{ overflow: 'hidden' }">
          <a-spin :spinning="leftLoading">
            <a-form-model
              ref="customerForm"
              :model="customerForm"
            >
              <a-row :gutter="10">
                <a-col :span="12">
                  <a-form-model-item label="企业名称">
                    <a-input placeholder="客户名称" v-model="customerForm.company_name" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="法定代表人">
                    <a-input placeholder="请输入申请人" v-model="customerForm.legal_person" />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="10">
                <a-col :span="12">
                  <a-form-model-item label="邮箱">
                    <a-input placeholder="最后公告" v-model="customerForm.email" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="法定代表人">
                    <a-input placeholder="请输入申请人地址" v-model="customerForm.legal_person" />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="10">
                <a-col :span="12">
                  <a-form-model-item label="手机号1">
                    <a-row :gutter="5">
                      <a-col :span="14">
                        <a-input disabled :style="{ color: '#333' }" type="text" v-model="customerForm.phone" />
                      </a-col>
                      <a-col :span="5">
                        <a-button type="danger" class="copy" :data-clipboard-text="customerForm.phone2" @click="copy(customerForm.phone)"> 复制号码 <a-icon type="phone" /> </a-button>
                      </a-col>
                    </a-row>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="手机号2">
                    <a-row :gutter="5">
                      <a-col :span="14">
                        <a-input type="text" v-model="customerForm.phone2" />
                      </a-col>
                      <a-col :span="5">
                        <a-button type="danger" class="copy" :data-clipboard-text="customerForm.phone2" :disabled="customerForm.phone2 === ''" @click="copy(customerForm.phone2)"> 复制号码 <a-icon type="phone" /> </a-button>
                      </a-col>
                    </a-row>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="10">
                <a-col :span="12">
                  <a-form-model-item label="微信号">
                    <a-input placeholder="请输入微信号" v-model="customerForm.wechat"></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="微信进展">
                    <a-radio-group v-model="customerForm.type">
                      <a-radio-button :value="index" v-for="(item,index) in typeOpts" :key="index">{{ item }}</a-radio-button>
                    </a-radio-group>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="10">
                <a-col :span="12">
                  <a-form-model-item label="注册资本">
                    <a-input placeholder="请输入微信号" v-model="customerForm.registered_capital"></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="经营状态">
                    <a-input placeholder="请输入代理机构" v-model="customerForm.business_status"></a-input>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-form-model-item label="注册地址">
                <a-input placeholder="请输入注册地址" v-model="customerForm.register_address"></a-input>
              </a-form-model-item>
              <a-form-model-item label="更多联系方式">
                <a-input placeholder="请输入更多联系方式" v-model="customerForm.notes2"></a-input>
              </a-form-model-item>
              <a-form-model-item>
                <a-row :style="{ marginTop: '30px' }">
                  <a-col :span="24" :style="{ textAlign: 'right' }">
                    <a-button type="danger" @click="signQuestion">
                      问题资源
                    </a-button>
                    <a-button type="primary" style="margin-left:5px" @click="onSubmitWechat">保存</a-button>
                  </a-col>
                </a-row>
              </a-form-model-item>
            </a-form-model>
          </a-spin>
        </a-col>
        <a-col :span="15">
          <a-card :title="false" style="min-height: 620px">
            <question v-if="rightTab == 1"></question>
            <!--            <a-tabs type="card" @change="onRightTabs">-->
            <!--              <a-tab-pane key="1" tab="报价"></a-tab-pane>-->
            <!--              <a-tab-pane key="2" tab="常见问题"></a-tab-pane>-->
            <!--            </a-tabs>-->
            <!--            <question v-if="rightTab == 1"></question>-->
            <!--            <my-article v-if="rightTab == 2"></my-article>-->
          </a-card>
        </a-col>
      </a-row>
    </div>
    <telephone v-if="telVisible" :telephone="telephone" @cancel="closePhoneList"></telephone>
  </a-modal>
</template>

<script>
import { STable } from '@/components'
import Telephone from '@/components/CallPhone/Telephone'
import Question from '@/components/CallPhone/Question'

import { getReceiveVip, signQuestionCustomer, getEditWechat, postEditWechat } from '@/api/adviser'
import Clipboard from 'clipboard'

export default {
  name: 'PatentModal',
  props: {
    type: {
      type: String,
      default: 'ptyp'
    }
  },
  components: {
    Telephone,
    STable,
    Question
  },
  data () {
    return {
      visible: false,
      leftLoading: false,
      customerForm: {},
      telVisible: false,
      telephone: '',
      rightTab: '1',
      typeOpts: {}
    }
  },
  created () {
    this.getReceive(this.type)
  },
  methods: {
    getReceive (receiveType) {
      const app = this
      app.leftLoading = true
      getReceiveVip(receiveType).then(res => {
        if (res.status === 0) {
          app.customerForm = res.result.customer
          getEditWechat(app.customerForm.customer_id).then(res => {
            this.typeOpts = res.result.type
          })
          app.leftLoading = false
          app.visible = true
        } else {
          app.$warning({
            zIndex: 1001,
            title: res.msg
          })
          app.onCallCancel()
        }
      })
    },
    onCallCancel () {
      this.visible = false
      this.$emit('cancel', this.visible)
    },
    copy () {
      const clipboard = new Clipboard('.copy')
      console.log(clipboard)
    },
    phoneModal (tel) {
      this.telephone = tel
      this.telVisible = true
    },
    signQuestion () {
      signQuestionCustomer(this.customerForm.customer_id).then(res => {
        if (res.status === 0) {
          this.onCallCancel()
        } else {
          this.$warning({
            zIndex: 1001,
            title: res.msg
          })
        }
      })
    },
    closePhoneList (visible) {
      this.telVisible = visible
    },
    onSubmitWechat () {
      const app = this
      const data = {}
      data['customer[wechat]'] = app.customerForm.wechat
      data['customer[type]'] = app.customerForm.type
      postEditWechat(data, app.customerForm.customer_id).then(res => {
        app.onCallCancel()
      })
    }
  }
}
</script>

<style>
.l-call-phone .ant-form-item {
  margin-bottom: 0 !important;
}
</style>
